<template>
  <div class="bg">
    <!-- v-on:click.self="goback" -->
    <div class="swipercenter3 magnify">
            <!-- <div class="price">
                        ￥123
            </div> -->
            <div class="sleNum">
                <span v-text="slenum"></span>/<span>{{swiperlists.length}}</span>
            </div>
            <div class="swiper-container3">               
                <div class="swiper-wrapper">                
                    <div class="swiper-slide" v-for="item in swiperlists">
                        <img class="showimg" :src='baseurl + item.imageUrl'>
                    </div>
                </div>
            </div>
        </div>
  </div>
</template>

<script>
    //require('../../assets/css/personalcenter.scss'); //引入的scss
    import {
        mapState,
        mapGetters,
        mapMutations,
        mapActions
    } from 'vuex'
    export default {
        name: 'magnify', //组件的名字
        data() {
            return { //数据
                slenum: 1,
                baseurl: $.hsf.baseUrl,
            }
        },
        methods: { //方法
            ...mapMutations(['setActiveIndex']),
            initswiper() {
                let vm = this
                new Swiper('.swiper-container3', { //使用 轮播
                    direction: 'horizontal',
                    autoplay: 0,
                    initialSlide:vm.activeIndex,
                    autoplayDisableOnInteraction: false,
                    preventClicks: false,
                    preventLinksPropagation: false,
                    width: window.innerWidth,
                    //autoHeight: true, //高度随内容变化
                    height:400,
                    onTouchEnd: function(swiper) {
                        vm.slenum = swiper.activeIndex + 1
                    },
                    onSlideChangeEnd: function(swiper) {
                        vm.slenum = swiper.activeIndex + 1
                            // console.log(swiper.activeIndex) //切换结束时，告诉我现在是第几个slide
                    },
                    onTap:function(swiper){
                        vm.$router.go(-1)
                        vm.setActiveIndex(swiper.activeIndex)
                    }
                })
            },
            goback() {
                this.$router.go(-1)
            }
        },
        computed: { //计算 用来引入vuex里面state
            ...mapGetters(['swiperlists']),
            ...mapState(['activeIndex'])
        },
        mounted: function() { //组件加载完成
            this.initswiper()
        },
        watch: { //健康某个数据变化后触发某个事件

        },
        destroyed: function() { //离开这个组件
        },
        components: {

        }

    }
</script>
<style scoped>
    .bg {
        background: #000;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        align-items: center;
    }
    
    .swipercenter3 {
        position: relative;
    }
    
    .showimg {
        width: 100%;
        display: block;
        height: 400px;
    }
    
    .price {
        position: absolute;
        left: 0px;
        top: 6px;
        z-index: 666;
        color: #fff;
        background: rgba(0, 0, 0, 0.3);
        width: 60px;
        height: 34px;
        border-radius: 2px;
        text-align: center;
        line-height: 34px;
    }
    
    .sleNum {
        position: absolute;
        width: 60px;
        height: 34px;
        right: 4px;
        bottom: 6px;
        z-index: 666;
        color: #fff;
    }
</style>
<!-- Add "scoped" attribute to limit CSS to this component only -->